<template>
  <div id="tools" class="tools">
    <!-- 工具栏按钮布局 -->
    <button v-for="value in btns" @click="emitClick(value)" :key="value" :class="['pure-button',{ 'button-error': selected === value }]">{{ value }}</button>
    <button @click="emitToggle" :class="['pure-button',{ 'button-secondary': !running, 'button-success': running }]">{{ running ? '停!' : '开始' }}</button>
    <button class="pure-button button-warning" @click="emitReset">重置</button>
  </div>
</template>

<script>
export default {
  props: ['btns', 'selected', 'running'],
  methods: {
    emitClick(value) {
      this.$emit('onClick', value)
    },
    emitToggle() {
      this.$emit('toggle')
    },
    emitReset() {
      this.$emit('reset')
    },
  },
}
</script>

<style scoped>
/* 在这里编写与ToolBar组件相关的CSS样式 */
    .tools {
      position: absolute;
      bottom: 20px;
      right: 20px;
      text-align: center;
    }

   .pure-button {
      display: inline-block;
      margin: 5px;
      padding: 10px 0;
      text-align: center;
      width: 50px;

      display: inline-block;
      zoom: 1;
      line-height: normal;
      white-space: nowrap;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;

      user-select: none;
   
      box-sizing: border-box;
      font-family: inherit;
      font-size: 100%;
   
      color: #444;
      color: rgba(0, 0, 0, .8);
      border: 0 rgba(0, 0, 0, 0);
      background-color: #E6E6E6;
      text-decoration: none;
      border-radius: 2px;


    }




    .button-success,
    .button-error,
    .button-warning,
    .button-secondary {
      color: white;
      border-radius: 4px;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .button-success {
      background: rgb(28, 184, 65);
    }

    .button-error {
      background: rgb(202, 60, 60);
    }

    .button-warning {
      background: rgb(223, 117, 20);
    }

    .button-secondary {
      background: rgb(66, 184, 221);
    }



</style>